<template>
  <div>
    <el-dialog
      title="编辑处方模板"
      :visible.sync="dialogVisible"
      append-to-body
      width="80%"
      class="dialog"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :before-close="handleClose"
      :close-on-click-modal="false"
      center
    >
      <el-container>
        <el-aside
          width="500px"
          style="border: 2px solid #ccc; padding: 10px; height: 700px"
        >
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="药品列表" name="1">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="药品">
                  <el-input
                    size="mini"
                    v-model="formInline.name"
                    placeholder="请输入药品进行检索"
                    @input="handleChangeName"
                  ></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select
                    @change="medicineTypeChange"
                    v-model="formInline.DrugClassCode"
                    size="mini"
                    style="width: 50px"
                    placeholder="请选择药品类型"
                  >
                    <el-option label="西药" value="001"></el-option>
                    <el-option label="中成药" value="002"></el-option>
                    <el-option label="中草药" value="003"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>

              <el-table
                :data="medicineList"
                v-loading="loading"
                ref="multipleTable"
                max-height="550"
                border
                highlight-current-row
                @row-click="handleSelectionChange"
              >
                <!--  <el-table-column type="selection" align="center" width="55">
                </el-table-column> -->
                <!--  <el-table-column type="selection" width="55">
                  <template slot-scope="scope">
                    <el-radio
                      v-model="scope.row.ischeck"
                      @click.native.prevent="handleSelectionChange(scope.row)"
                    ></el-radio>
                  </template>
                </el-table-column> -->
              <!--   <el-table-column prop="type" align="center" label="药品类型">
                </el-table-column> -->
                <el-table-column prop="name" align="center" label="药品名称">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main
          style="
            border: 2px solid #ccc;
            padding: 10px;
            height: 700px;
            margin-left: 15px;
          "
        >
          <!--西药 -->
          <westernMedicine
            :selectMechie="selectMechie"
            @getWesternData="getWesternData"
            @delItem="delItem"
            :DrugClassCode="formInline.DrugClassCode"
            :frequencyArr="frequencyArr"
            :usageArr="usageArr"
          />

          <!--中药 -->

          <!--这个是主的患者描述的界面 -->
          <div style="border: 1px solid #ccc; padding: 15px; margin: 5px 0px">
            <el-form
              :inline="true"
              :model="ruleForm1"
              :rules="rules"
              ref="ruleForm1"
              class="demo-ruleForm1"
            >
              <!--   <el-form-item label="处方模板" prop="prescriptionTemplate">
              <el-select
                v-model="ruleForm1.prescriptionTemplate"
                placeholder="请选择"
                clearable
                @change="handleChangeData($event)"
              >
                <el-option
                  v-for="item in templateArr"
                  :key="item.id"
                  :label="item.template_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->

              <el-form-item label="诊断疾病" prop="disease">
               <el-input
                  type="input"
                  placeholder="请选择诊断名称"
                  size="large"
                  @input="$forceUpdate()"
                  @change="$forceUpdate()"
                  @focus="importDiagnosisName"
                  v-model="ruleForm1.disease"
                     style="width:500px"
                >
                  <el-button
                    slot="append"
                    @click="importDiagnosisName"
                    icon="el-icon-search"
                  ></el-button>
                </el-input>
              </el-form-item>

              <el-form-item label="模版名称" prop="template_name">
                <el-input
                  size="small"
                  type="input"
                  v-model="ruleForm1.template_name"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
    <importDiag ref="importDiag" @submit="submit" />
      <div slot="footer">
        <el-button @click="handleClose('ruleForm1')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm1')"
          >确 定</el-button
        >
      </div>
      <!--       <medicine ref="medicine" @selectArr="getSelectArr" /> -->
    </el-dialog>
  </div>
</template>

<script>
import importDiag from "../../orderList/component/importDiag.vue";
import { mapState } from "vuex";
/* import medicine from "./medicine.vue"; */
import tableFile from "@/components/tableFile.vue";
//西药
import westernMedicine from "../component/westernMedicine.vue";
import {
  ApiUpdateAdviceTemplate,
  ApigetICDDataCN,
  ApigetICDData,
  ApiGetMedicineList,
  getMedicineFrequencyData,
  getMedicineTakeTypeData,
  ApiAddAdviceTemplate,
} from "../../../api/index";
export default {
  components: { westernMedicine, tableFile,importDiag },
  name: "prescribing",
  data() {
    return {
      loading: false,
      selectMechie: [],
      medicineList: [],
      formInline: {
        DrugClassCode: "001",
      },
      activeName: "1",
      templateArr: [],
      selectArr: [],
      dialogVisible: false,
      oldForm: {
        ICD: "",
        ICD1: "",
        type: "",
        main: "",
        prescribeMedicine: "",
        disease: "",
        template_name: "",
      },
      ruleForm1: {},
      prescriptionTemplatArr: [
        { id: "1", name: "处方模板一" },
        { id: "2", name: "处方模板二" },
      ],
      list: [
        {
          id: "1",
          ICDName: "鼠疫",
          code: "SY",
          checked: false,
        },
        {
          id: "2",
          ICDName: "炭疽",
          code: "TJ",
          checked: false,
        },
        {
          id: "3",
          ICDName: "鼻疽",
          code: "BJ",
          checked: false,
        },
        {
          id: "4",
          ICDName: "麻风",
          code: "MF",
          checked: false,
        },
        {
          id: "5",
          ICDName: "伤寒",
          code: "SH",
          checked: false,
        },
        {
          id: "6",
          ICDName: "霍乱",
          code: "HL",
          checked: false,
        },
        {
          id: "7",
          ICDName: "肾结核",
          code: "SJH",
          checked: false,
        },
        {
          id: "8",
          ICDName: "肠结核",
          code: "CJH",
          checked: false,
        },
        {
          id: "9",
          ICDName: "眼结核",
          code: "YJH",
          checked: false,
        },
        {
          id: "10",
          ICDName: "舌结核",
          code: "SJH",
          checked: false,
        },
      ],
      DrugList: [],
      rules: {
        type: [{ required: true, message: "请选择", trigger: "blur" }],
        ICD: [{ required: true, message: "请选择", trigger: "blur" }],
        ICD1: [{ required: true, message: "请选择", trigger: "blur" }],

        main: [{ required: true, message: "请输入主诉", trigger: "blur" }],
      },
      templateData: [],
      adviceArr: [],
      frequencyArr: [],
      usageArr: [],
    };
  },
  computed: {
    ...mapState(["userState"]),
  },
  methods: {
      submit(e, val) {
      this.$set(this.ruleForm1, "disease", e.toString());
      this.$set(this.ruleForm1, "disease_code", val.toString());
    },
     importDiagnosisName() {
      this.$refs.importDiag.show();
    },
    handleChangeName(e) {
      this.getMedicineList();
    },
    //多选按钮
    handleSelectionChange(e) {
      if (this.selectMechie.length > 0) {
        let val = this.selectMechie.find((item) => {
          return item.id == e.id;
        });
        if (!val) {
          this.selectMechie.push(e);
        }
      }
      if (this.selectMechie.length == 0) {
        this.selectMechie.push(e);
      }
      console.log(this.selectMechie);
      /*       let arr = JSON.parse(JSON.stringify(e)); */
    },
    //点击某一行的数据
    /*   rowClick(e) {
      this.ruleForm1 = e;
      console.log(e);
    }, */

    //药品类型切换
    medicineTypeChange(e) {
      this.selectMechie = [];
      this.ruleForm1 = {};
      this.getMedicineList();
      this.getDataCN();
    },

    handleClick(e) {
      this.$refs.multipleTable.clearSelection();
    },
    handleChangeData(row) {
      this.ruleForm1.disease = row.disease;
      this.getSelectArr(JSON.parse(row.medical));
    },
    show(row) {
      this.selectMechie = [];
      if (row) {
        for (const key in this.oldForm) {
          this.$set(this.ruleForm1, key, row[key]);
        }
        this.id = row.id;
        this.getSelectArr(JSON.parse(row.medical));
      }

      //获取药品列表
      this.getMedicineList();
      //获取药品频次
      this.getFreData();
      //获取用药方式
      this.getMedicine();
      //获取中医服药方式
      this.getDataCN();

      this.dialogVisible = true;
    },
    getDataCN() {
      if (
        this.formInline.DrugClassCode == "002" ||
        this.formInline.DrugClassCode == "003"
      ) {
        ApigetICDDataCN({page:1,size:999}).then((res) => {
          this.DrugList = res.data;
        });
      } else {
        ApigetICDData({page:1,size:999}).then((res) => {
          this.DrugList = res.data;
        });
      }
    },

    //获取服药频次
    getFreData() {
      getMedicineFrequencyData().then((res) => {
        this.frequencyArr = res.data;
      });
    },
    //获取服药方式
    getMedicine() {
      getMedicineTakeTypeData().then((res) => {
        this.usageArr = res.data;
      });
    },

    getSelectArr(data) {
      this.templateData = data;
      this.selectMechie = data;
    },

    getMedicineList(val) {
      this.loading = true;
      ApiGetMedicineList({
        DrugClassCode: this.formInline.DrugClassCode,
        name: this.formInline.name,
        page: 1,
        size: 9999,
      })
        .then((res) => {
          this.medicineList = res.data;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    getWesternData(val) {
      this.selectArr = val;
      /*    this.selectArr = val;
      let arr = [];
      val.forEach((item) => {
        let val = item.name + "-" + item.price;
        arr.push(val);
      }); */
      /*    this.ruleForm1.prescribeMedicine = arr.toString(); */
    },
    delItem(row) {
      this.$refs.multipleTable.toggleRowSelection(row, false);
    },
    //导入患者描述信息

    handleClose(val) {
      this.dialogVisible = false;
      this.ruleForm1 = { ...this.oldForm };
      this.$nextTick((_) => {
        this.$refs.ruleForm1.clearValidate();
      });
    },

    submitForm(val) {
      this.$refs["ruleForm1"].validate(async (valid) => {
        if (valid) {
          let that = this;
          //预览界面
          let row = {
            ...this.ruleForm1,
            medical: JSON.stringify(this.selectArr),

            /*          order_id: this.id, */
          };
          if (this.id) {
            row.id = this.id;
          }
          if (this.id) {
            ApiUpdateAdviceTemplate(this.id, row).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.dialogVisible = false;
                this.$emit("refresh");
              }
            });
          } else {
            ApiAddAdviceTemplate(row).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.dialogVisible = false;
                this.$emit("refresh");
              }
            });
          }
        }
      });
    },
    //开药
    medicineClick() {
      this.$refs.medicine.show();
    },
  },
};
</script>

<style>
</style>